
<template>
  <div class="admin-withdrow-main" v-loading="boo.loading">
    <div class="back-content flex-normal">
      <span class="back-icon el-icon-back" @click="$router.go(-1)"></span>
      <span class="back-label">账户开户</span>
    </div>
    <div class="head-content">
      <div class="head-label">账户激活</div>
      <div class="bar-txt">请输入账户密码，激活资金账户</div>
    </div>
    <div class="model-item">
      <div class="model-label">支付密码</div>
      <div class="model-form flex-normal">
        <div class="form-label">支付密码</div>
        <div class="form-val flex-normal">
          <div class="LPay-code-container">
            <div id="ipt_pwd2" class="flex-normal ipt-pwd-content">
              <span id="LOGPASS2_SHOW">请输入密码</span>
              <input id="LOGPASS2" class="default input_search" type="password" disabled="disabled" />
              <div id="keyboardBtn2" class="ipt_pwd_rjp default"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-content">
      <el-button class="purshase-btn" type="primary" size="small" @click="showDialog" :loading="boo.isSubmit">立即激活</el-button>
    </div>
    <!-- 提现验证 -->
    <dialog-normal
      ref="dialog-withdrow"
      :dialog-prop="{
        title: '短信验证',
        height: '300px',
        width: '600px',
        submit: '立即激活'
      }" @normal-submit="submitDialog">
      <template #dialog-content>
        <div class="dialog-code-container">
          <div class="flex-normal">
            <span class="Lpay-label">验证手机号：</span>
            <div class="flex-normal ipt-pwd-content">
              <span> {{ baseData.phone }}</span>
            </div>
          </div>
          <div class="flex-normal">
            <span class="Lpay-label">验证码：</span>
            <div class="flex-normal ipt-pwd-content">
              <el-input v-model="code" placeholder="请输入手机验证码"></el-input>
            </div>
          </div>
        </div>
      </template>
    </dialog-normal>
  </div>
</template>

<script>
import {getRandom
} from "@/api/financeManage/shop-finance";
import {LLKeyBord} from '@/utils/tools.js'
import {
  getWithdrowMessage,
} from "@/api/financeManage/shop-withdrow.js";
import {
  openacctActivateApply,
  openacctActivateVerify
} from "@/api/financeManage/active-account.js";
export default {
  components: {
    "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog")
  },
  data() {
    return {
      options: {},
      passwordInstance: null,
      boo: {
        loading: false,
        isSubmit: false
      },
      baseData: {},
      code: '',
      token: ''
    };
  },
  mounted(){
    let _self = this
    _self.initPage()
  },
  methods: {
    initPage(){
      let _self = this
      _self.boo.loading = true
      getWithdrowMessage().then(res => {
        const {data} = res
        _self.baseData = data
      }).finally(() => {
        _self.boo.loading = false
      })
      _self.initPWD()
    }, 
    async initPWD(){
      let _self = this
      await _self.getRandomPage()
      let params = {
        click_objId: '#keyboardBtn2', 
        Input_texId: '#LOGPASS2',
        parent_objId: '#ipt_pwd2',
        placeholderId: '#LOGPASS2_SHOW'
      }
      const passowrd = LLKeyBord(params, _self.options) 
      passowrd.initOptions()
      _self.passwordInstance = passowrd
    },
    async getRandomPage(){
      let _self = this
      await getRandom().then(res => {
        _self.options = res.data
      })
    },
    showDialog(){
      let _self = this
      const vm = _self.$refs['dialog-withdrow']
      // 获取国密密文
      _self.passwordInstance.setRandKey(_self.options.random_value) // 先设置随机key
      const password = _self.passwordInstance.getOutputSM() // 国密加密密码
      const hash = _self.passwordInstance.getHash() // RSA加密密码
      if(!hash || hash == '') return _self.$message.error('密码不能为空')
      let props = {
        password: password,
        random_key: _self.options['random_key']
      }
      _self.boo.isSubmit = true
      openacctActivateApply(props).then(res => {
        _self.token = res.data
        vm.showDialog = true
      }).catch((err) => {
        _self.initPWD()
      }).finally(() => {
        _self.boo.isSubmit = false
      })
      
    },
    submitDialog(){
      let _self = this
      const vm = _self.$refs['dialog-withdrow']
      if(!_self.code || _self.code == '') return _self.$message.error('验证码不能为空')
      vm.loading = true
      openacctActivateVerify({
        verify_code: _self.code,
        token: _self.token
      }).then(res => {
        const { code, msg } = res
        if(code == 200){
          _self.$message.success('激活成功，3s后返回账户中心')
          setTimeout(() => {
            _self.$router.replace({name: 'FinanceStore'})
          }, 3500)
        }else{
          _self.initPWD()
        }
        vm.showDialog = false
      }).finally(() => {
        vm.loading = false
      })
    },
  }
};
</script>
<style scoped lang="scss">
.admin-withdrow-main{
  margin: 0 20px;
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  .back-content{
    padding-bottom: vh(20);
    .back-icon{
      font-size: vh(26);
      cursor: pointer;
    }
    .back-label{
      margin-left: vw(20);
      font-size: 13px;
      color: #3D3D3D;
    }
  }
  .head-content{
    padding-bottom: 40px;
    .head-label{
      font-size: 16px;
      margin-bottom: 20px;
    }
    .bar-txt{
      font-size: 14px;
    }
    
  }
  .model-item ::v-deep{
    margin-bottom: 25px;
    width: 600px;
    .el-input__inner{
      border: none !important;
    }
    .model-label{
      color: #0003AA;
      font-size: 14px;
      padding-bottom: 15px;
    }
    .model-form{
      position: relative;
      margin-bottom: 15px;
      padding-left: 20px;
      .form-label{
        font-size: 13px;
        color: #3D3D3D;
        width: 80px;
      }
      .form-val{
        flex: 1;
        position: relative;
      }
      .LPay-code-container{
        width: 100%;
      }
      .ipt-pwd-content{
        height: 40px;
        border-bottom: 1px solid #D8D8D8;
      }
    }
    .money-content{
      border-bottom: 1px dotted #D8D8D8;
      padding-top: 15px;
      .money-icon{
        font-size: 12px;
        color: #3D3D3D;
      }
    }
    .money-foot{
      margin-top: 10px;
      // justify-content: flex-end;
      .tx-desc{
        background: rgba(248, 213, 9, 0.1);
        color: #0003AA;
        font-size: 12px;
        border-radius: 3px;
        padding: 6px 10px;
      }
      .money-txt{
        font-size: 12px;
        color: #3D3D3D;
      }
      .money-btn{
        font-size: 12px;
        color: #0003AA;
        cursor: pointer;
        margin-left: 15px;
      }
    }
  }
}
.dialog-code-container ::v-deep{
  .el-input__inner{
    border: none;
  }
  .code-btn-unit{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background: rgba(0, 3, 170, 0.1);
    border-radius: vh(3);
    height: vh(36);
    padding: 0 vw(15);
    .btn-txt{
      font-size: 13px;
      color: #0003AA;
    }
  }
  .ipt-pwd-content{
    height: 60px;
    position: relative;
    width: 60%;
    border-bottom: 1px solid #D8D8D8;
    margin-bottom: 10px;
    .placehoder-txt{
      color: #999;
      font-size: 13px;
    }
  }
  .Lpay-label{
    font-size: 13px;
    width: 120px;
  }

}
.dialog-code-container{
  .sfz-item{
    text-align: center
  }
}
</style>